<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="接收人:" prop="receiveName">
                    <el-input v-model="queryParams.receiveName" clearable placeholder="请输入接收人"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="发送状态:" prop="status">
                    <el-select v-model="queryParams.status" clearable>
                        <el-option v-for="dict in stateList" :label="dict.label" :value="dict.value"
                            :key="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="发送时间:" prop="sendTime">
                    <el-date-picker type="daterange" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format='yyyy-MM-dd'
                        style="width: 100%;" v-model="timeRange" @change="changeTime">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="消息类型:" prop="messageType">
                    <el-select v-model="queryParams.messageType" clearable>
                        <el-option :label="item.dictLabel" :value="item.dictSort"
                            v-for="(item, index) in busFlowTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

        </SearchContent>
        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="sendAgest" :disabled="senfStatus" type="primary">重新发送</el-button>
        </div>
        <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">

            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" :isSelect="true"
                @selectionChange="selectionChange" border>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="接收人" align="center" prop="receiveName" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="手机号" align="center" prop="phoneNumber" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="消息类型" align="center" prop="messageType" min-width="120px"
                        show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <dict-tag :options="dict.type.message_type" :value="row.messageType" />
                        </template>
                    </el-table-column>
                    <el-table-column label="消息通知" align="center" prop="title" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="通知内容" align="center" prop="content" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="发送时间" align="center" prop="createTime" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="发送方式" align="center" prop="pushType" min-width="120px"
                        show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <span v-if="row.pushType == 1">短信</span>
                            <span v-if="row.pushType == 2">邮件</span>
                            <span v-if="row.pushType == 3">站内信</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发送状态" align="center" prop="status" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <span v-if="row.status == 0">成功</span>
                            <span v-else>失败</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="失败原因" align="center" prop="failLog" min-width="120px"
                        show-overflow-tooltip />
                </template>
            </table-page>

        </div>

    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as apis from "@/api/messageManagement/index.js";
export default {
    name: "MessageRecording",
    components: {
        SearchContent,
    },
    dicts: [ 'message_type'],
    data() {
        return {
            // 遮罩层
            loading: false,
            retutnCarTimes: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                status: null,
                sendTime: null,
                receiveName: null,
            },
            total: 0,
            dataList: [],
            selected: [],
            stateList: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '成功',
                    value: 0
                },
                {
                    label: '失败',
                    value: 1
                },
            ],
            senfStatus: true,
            busFlowTypeList: [],
            timeRange: [],
        };
    },
    mounted() {
        this.getList()
    },
    activated() {
        this.handleQuery()
    },
    async created() {
        this.busFlowTypeList = await this._getDicts("message_type");
    },
    methods: {
        // 发送时间发生改变
        changeTime(val) {
            this.queryParams.startTime = val[0]
            this.queryParams.endTime = val[1]
            },
        // 重新发送
        sendAgest() {
            let id = null
            if(this.selected.length>0){
                id = this.selected.join(',')
                apis.messageCountAgae({ ids: id }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success('发送成功')
                    }
                })
            }
           
        },
        selectionChange(val) {
            this.selected = []
            if (val.length>0) {
                this.senfStatus = false
                val.map((res) => {
                    this.selected.push(res.id);
                })
            } else {
                this.senfStatus = true
            }

        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            apis?.messageList(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                vinNo: null,
                carNo: null,
                ascription: null,
                purchaseSource: null,
                businessScopeCode: null,
                storageStatus: null,
                customerName: null,
            },
            this.timeRange=[],
                this.handleQuery();
        },


    }
};
</script>
